<!-- 规则组件 -->
<template>
  <div>
    <div class="card-title card-title-background" >告警规则{{ index+1 }} <a v-if="index > 0" style="margin-left: 30px;" @click="deleteRule">删除</a></div>
    <a-form
      layout='horizontal'
      ref='form'
      :model='rule'
      :label-col='{ md: { span: 4 }, sm: { span: 24 } }'
      :wrapper-col='{ md: { span: 20 }, sm: { span: 24 } }'
    >
      <a-form-item label='事件名称:' name='eventId'>
        <a-select
          show-search
          v-model:value="rule.eventId"
          placeholder="请选择事件名称"
          style="width: 320px;"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          :options="sourceEvents"
          @change="handleEventIdChange" />
      </a-form-item>

      <a-form-item label='持续周期:' name='periodType'>
        <a-input v-model:value='rule.periodValue' placeholder='次/分钟值' allow-clear autocomplete='off' style="width: 250px;"/>
        <a-form-item-rest>
          <a-select v-model:value="rule.periodType" style="width: 100px;margin-left: 5px;">
            <a-select-option :value="1">次数</a-select-option>
            <a-select-option :value="2">分钟</a-select-option>
          </a-select>
        </a-form-item-rest>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'MonitorsStrategyEventstrategySubRule',
  emits: ['update:value', 'change', 'deleteIndex'],
  props: {
    index : Number,
    sourceEvents : Object,
    rule : Object
  },
  data() {
    return {
    };
  },
  methods: {
    handleEventIdChange(value, option) {
      console.log(value, option);
      this.rule.eventId = option.value
    },
    deleteRule () {
      this.$emit("deleteIndex", this.index);
    }
  }
};
</script>

<style lang="less" scoped>
.card-title {
  border-left: 5px solid;
  border-color: var(--primary-color);
  padding-left: 10px;
}

.card-title-background {
  background-color: #f5f5f5;
  height: 2em;
  line-height: 2em;
  margin-bottom: 2em;
}
</style>
